<template>
    <div class="market-overview">
        <div class="title" id="market-overview">Market Overview</div>
        <div class="card">
            <div class="header">
                <div class="symbol">{{ active_stock }}</div>
                <div class="time-select">
                    <div class="time-select-item" v-for="item in all_time" :key="item.id" @click="changeTime(item.value)" :style="`color: ${ select_time == item.value ? 'var(--active-color)' : 'var(--text-color)' }`">{{ item.name }}</div>
                </div>
            </div>
            <div class="chart-box">
                <Original></Original>
                <!-- 这里未来需要加入 TradingView 的图表组件 -->
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted } from 'vue';
import Original from '@/components/chart/Original.vue';
import { active_stock, all_time, select_time, changeTime } from '@/service/market.js';
</script>

<style scoped lang="less">
.market-overview {
    width: 100%;

    .title {
        font-size: 1.2vw;
        font-weight: 700;
        margin-bottom: 1vw;
    }

    .card {
        box-sizing: border-box;
        width: 100%;
        min-height: 25vw;
        background-color: #fff;
        box-shadow: 0 0 0.5vw rgba(0, 0, 0, 0.05);
        border-radius: 0.5vw;
        padding: 1vw;
        display: flex;
        flex-direction: column;
        gap: 0.5vw;

        .header {
            display: flex;
            flex-direction: column;
            gap: 1vw;

            .symbol {
                font-size: 1.2vw;
                font-weight: 700;
            }

            .time-select {
                display: flex;
                gap: 1vw;

                .time-select-item {
                    cursor: pointer;
                    font-size: 0.65vw;
                }
            }
        }

        .chart-box {
            width: 100%;
            height: 20vw;
        }
    }
}
</style>